<style scoped>
  .content .w980{
    padding-top: 0;
  }
  .nav-path{
    position: relative;
    margin-bottom: 20px;
  }
  .nav-path ol{
    width: 100%;
    height: 36px;
  }
  .nav-path button.add-hsp-btn{
    position: absolute;
    top: 0;
    right: 0;
  }
  .nav-path ol li a{
    color: #444;
  }
  .nav-path ol li:last-child{
    color: #00CB8F;
  }
  button{
  	outline: none!important;
  }
  .breadcrumb{
  	margin-bottom: 0;
  	position: relative;
  }
  .modal-header .close{
  	margin: 0;
  	position: absolute;
    width: 16px;
    height: 16px;
    right: 10px;
    top: 10px;
    text-align: center;
    line-height: 16px;
  }
  /*机构列表*/
  .list-tips{
    padding: 0;
    height: 36px;
    line-height: 36px;
    background: #F5F5F4  url(../../assets/img/list_tips.png) no-repeat 20px center;
    background-size: 4px 20px;
  }
  .list-tips span{
    float: left;
    font-size: 16px;
    height: 36px;
    line-height: 36px;
    margin-left: 36px;
    text-align: left;
  }

	/*医院列表*/
	.form-group.limitManage{
		margin-bottom: 40px;
		margin-top: 20px;
		min-height: 580px;
	}
	.form-group.limitManage label,.form-group.limitManage aside{
		float: left;
	}
	.form-group.limitManage aside{
		border: 1px solid #E6E5E2;
	}
	.form-group.limitManage aside .hospital-list{
		height: 543px;
		overflow: auto;
		overflow-x: hidden;
	}
	.form-group.limitManage aside.limit-hospital{
		width: 25%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		margin-left: 13px;
		margin-right: 32px;
	}
	.form-group.limitManage aside.limit-hospital .hospital-list ul li a{
		display: block;
		width: 100%;
		height: 30px;
		line-height: 30px;
		color: #666;
		font-size: 14px;
		text-indent: 20px;
		overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.form-group.limitManage aside.limit-hospital .hospital-list ul li a:hover{
		color: #f00;
		text-decoration: none;
		background-color: #85D0F1;
	}
	.form-group.limitManage aside.limit-hospital-detail{
		width: 70%;
		min-height: 580px;
	}
	.form-group.limitManage aside.limit-hospital-detail .hp-list-detail th,.form-group.limitManage aside.limit-hospital-detail .hp-list-detail td{
		padding:15px 5px;
	}
	.form-group.limitManage .limit-title{
		padding: 0;
		height: 37px;
		line-height: 37px;
		background: #F8F8F7  url(../../assets/img/list_tips.png) no-repeat 20px center;
		background-size: 4px 20px;
	}
	.form-group.limitManage .limit-title span{
		float: left;
		font-size: 16px;
		height: 37px;
		line-height: 37px;
		margin-left: 34px;
	}

	.list-opera .form-control{
		width: 150px;
	}
	
	/*span-error*/
    span.error{
        color: #f00;
        display: block;
        width: 100%;
        padding-left: 14%;
        background: none;
        margin-bottom: 0;
        line-height: 30px;
        border: 0;
    }
	.exp-mark{
		color: red;
		height: 100%;
		line-height: 100%;
		font-size: 14px;
		margin-right: 8px;
		display: inline-block;
	}

	.form-group.footer-center{
		text-align: center;
	}

	.vertical-top,#notice-container{
		float: left;
	}

	.form-group .validation-flag{
	    display: inline-block;
	} 

	.form-group .validation-flag{
	    height: 34px;
	}

    .form-group .validation-flag label{
	    width: auto;
	    float: left;
	    padding: 0 5px 0 15px;
	    margin-bottom: 0;
	    height: 34px;
	    line-height: 34px;
    }

    .form-group .validation-flag input{
	    width: 18px;
	    height: 18px;
	    margin: 8px 4px;
    }

    .form-group .validation-flag .flag-is,.form-group .validation-flag .flag-or{
	    display: inline-block;
	    width: 80px;
	    height: 34px;
    } 
     .default-tag{
    	padding: 0 15px;
    }

    .form-group .validation-flag .flag-or{
    	margin-left: 30px;
    } 

    .form-group .vertical-top{
    	vertical-align: top;
    }

</style>

<template>
	<div class="index clearafter">
		<!-- 头部组件 -->
	    <header-component></header-component>
	    <div class="content cbafter">
		    <!-- 侧部导航组件 -->
		    <div class="w220 fl">
		        <aside-component></aside-component>
		    </div>
			<!-- 右部内容区 -->
			<div class="w980 fr">
				<!-- 路径导航 -->
				<nav class="nav-path">
					<ol class="breadcrumb">
					  <li>广告管理</li>
					  <li>新增广告</li>
					</ol>
				</nav>
				<!-- 新增广告 -->
				<div class="increase-doctors">
					<div class="form-msg">
						<form id="form_subAddDocData" class="form-horizontal" @submit.prevent="submitAdvertisement">
							<div class="form-group">
				                <label class="control-label col-md-3">APP名称</label>
				                <div class="col-md-4">
				                    <select class="form-control valid" name="expertFlag" v-model="newAdvertisement.productCode">
				                        <option v-for="item in getAppNames" value="{{item.code}}">{{item.name}}</option>
				                    </select>
				                </div>
				            </div>
				            <div class="form-group">
				                <label class="control-label col-md-3">广告位置</label>
				                <div class="col-md-4">
				                    <select class="form-control valid" name="expertFlag" v-model="newAdvertisement.position">
				                        <option v-for="item in dictionary.adverPosition" value="{{item.key}}">{{item.text}}</option>
				                    </select>
				                </div>
				            </div>
				            <div class="form-group">
				                <label class="control-label col-md-3"><span class="exp-mark">*</span>广告名称</label>
				                <div class="col-md-4">
				                    <input type="text" id="localDoctorId" name="localDoctorId" placeholder="广告名称" class="form-control" v-model="newAdvertisement.name" required />
				                </div>
				            </div>
				            <div class="form-group">
	                            <label class="control-label col-md-3"><span class="exp-mark">*</span>上传图片:</label>
	                            <div class="col-md-4">
	                              <imgid-btn :imgurl="imgurl"></imgid-btn>
	                              <!-- <span class="img-tips">建议图片尺寸1080×540(px)</span> -->
	                            </div> 
	                        </div>
				           <div class="form-group">
				                <label class="control-label col-md-3">链接类型</label>
				                <div class="col-md-4">
				                    <select class="form-control valid" name="expertFlag" v-model="newAdvertisement.linkType">
				                        <option v-for="item in dictionary.linkType" value="{{item.key}}">{{item.text}}</option>
				                    </select>
				                </div>
				            </div>
				            <div class="form-group">
				                <label class="control-label col-md-3">链接地址</label>
				                <div class="col-md-4">
				                    <input type="text" id="localDoctorId" name="localDoctorId" placeholder="" class="form-control" v-model="newAdvertisement.linkAddress" />
				                </div>
				            </div>  
				            <div class="form-group">
				                <label class="control-label col-md-3 vertical-top">正 文: </label>
				                <div id="notice-container" class="col-md-8">
				                    <div id="advertisement-content"></div>
				                </div>
				            </div>
				            <div class="form-group">
				                <label class="control-label col-md-3">默认标志</label>
				                <div class="default-tag">
				                    <div class="validation-flag">
			                         <div class="flag-is">
			                             <label for="flag-is">是</label>
			                             <input type="radio" name="flag" id="flag-is" class="form-control" value="1" v-model="newAdvertisement.defaultFlag" />
			                         </div>
			                         <div class="flag-or">
			                             <label for="flag-or">否</label>
			                             <input type="radio" name="flag" id="flag-or" class="form-control" value="0" v-model="newAdvertisement.defaultFlag" />
			                         </div>
			                     </div>
				                </div>
				            </div> 
				            <div class="form-group">
				                <label class="control-label col-md-3"><span class="exp-mark">*</span>开始日期</label>
				                <div class="col-md-4">
				                    <input type="text" id="startDate" name="valid_startDate" placeholder="开始日期" class="form-control" value="{{newAdvertisement.valid_startDate}}" v-model="newAdvertisement.valid_startDate" required />
				                </div>
				            </div> 
				            <div class="form-group">
				                <label class="control-label col-md-3"><span class="exp-mark">*</span>结束日期</label>
				                <div class="col-md-4">
				                    <input type="text" id="endDate" name="valid_endDate" placeholder="结束日期" class="form-control" value="{{newAdvertisement.valid_endDate}}" v-model="newAdvertisement.valid_endDate" required />
				                </div>
				            </div> 
				            <div class="form-group">
				                <label class="control-label col-md-3"><span class="exp-mark">*</span>排序</label>
				                <div class="col-md-4">
				                    <input type="text" id="localDoctorId" name="localDoctorId" placeholder="排序" class="form-control" v-model="newAdvertisement.orderNo" pattern="\d+" required />
				                </div>
				            </div> 
				            <div class="form-group">
				                <label class="control-label col-md-3">广告备注</label>
				                <div class="col-md-4">
				                    <textarea name="remark" placeholder="广告备注" class="form-control" v-model="newAdvertisement.description"></textarea>
				                </div>
				            </div>   
				            <div class="form-group footer-center col-md-10">
                                <button class="btn btn-default save-btn">保 存</button>
                                <button class="btn btn-default cancel-btn" @click.prevent="backManage">返 回</button>
                            </div>
				    	</form>
					</div>
				</div>
			</div><!-- 内容区 -->
		</div>
	</div>
</template>

<script>
	import 'assets/reset.css';
	import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css';
	import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js';

	// 富文本
    // import 'assets/lib/bootstrap-summernote/summernote.css';
    // import 'assets/lib/bootstrap-summernote/summernote.min.js';
    // import 'assets/lib/bootstrap-summernote/lang/summernote-zh-CN.js';

    //laydate
	import 'assets/lib/laydate/need/laydate.css';
	import 'assets/lib/laydate/skins/qianhuang/laydate.css';
	import 'assets/lib/laydate/laydate3.js';

    // 富文本
    import 'assets/lib/bootstrap-summernote/summernote.css';
    require('summernote')

	import Header from 'components/module-head.vue';
	import Asider from 'components/menu-list.vue';
	import ImgUploadBtn from 'components/ImgUploadBtn.vue';
	import Public from 'assets/public.js';

	export default {
		data () {
			return {
				//字典请求
				dictionary: {
					adverPosition: {},//广告位置base_bannerPostion
					linkType: {},//链接类型base_hyperLink		
				},

				//图像地址
				imgurl: '',
				//获取APP名称
				getAppNames: {},
				//添加广告
				newAdvertisement: {
				    defaultFlag: "0",
				    description: "",
				    linkType: "00",
				    linkAddress: '',
				    linkText: '',
				    name: "",
				    orderNo: null,
				    picture: null,
				    position: "0301",
				    productCode:"coms.xiangtan.doctor_pc",
				    valid_endDate: "",
				    valid_startDate: ""
				},

				//新增？保存---标识
				isWatch: '',
				addOrSave: 'add'
			}
		},
		events: {
			'serviceIconId': function(imgId){this.newAdvertisement.picture = imgId}
		},
		watch: {},
		ready() {
			//字典请求
			this.dictionaryRequest();
			//获取APP名称列表
			this.getAppNameList();
			//初始化summernote
			this.summernotePlugin();
			//初始化日期
			this.initLaydate();
			//查看？
			this.watchProduct();
		},
		components: {
			'header-component': Header,
			'aside-component': Asider,
			'imgid-btn': ImgUploadBtn
		},
		methods: {
            //初始化summernote
            summernotePlugin () {
                $('#advertisement-content').summernote({
                    height: 300,
                    placeholder: '请您输入发布的内容',
                    lang: 'zh-CN' 
                });
                $('#advertisement-content').summernote('code','')
            },

            //初始化日期插件
			initLaydate () {
				var that = this;
				laydate({
		            elem: '#startDate',
		            format: 'YYYY-MM-DD',
		            event: 'focus',
		            festival: true,
		            min: laydate.now()
		        });
		        laydate({
		            elem: '#endDate',
		            format: 'YYYY-MM-DD',
		            event: 'focus',
		            festival: true,
		            min: laydate.now()
		        });
			},

			//字典请求
			dictionaryRequest () {
				var that = this;
				var arr = ["base.dictionary.base_bannerPostion","base.dictionary.base_hyperLink"];
				$.when(Public.commonajax('coms.multipleDictionaryService','findDic','['+JSON.stringify(arr)+']')).done(function(res){
					$.each(res.body,function(index,ele){
						if(ele.dicId == arr[0]){
							that.dictionary.adverPosition = ele.items;
						}
						if(ele.dicId == arr[1]){
							that.dictionary.linkType = ele.items;
						}
					});
				});
			},

			//获取APP名称列表
			getAppNameList () {
				var that = this;
				$.when(Public.commonajax('base.tenantProductsService','queryProductTenantByPcode','['+false+']')).done((res)=>{
					if(res.code == 200){that.getAppNames = res.body}
				});
			},

			//提交新增广告
			submitAdvertisement () {
				var that = this;
                if (this.newAdvertisement.picture <= 0) {
                    Public.ajaxPrompt("请选择图片上传！");
                    return
                }
                let val_time = this.validateTime();
                if(val_time != true){return false}
                //新增？保存
            	this.addOrSave = this.isWatch == undefined ? 'add' : 'saveProductBanner';
				this.newAdvertisement.linkText =  $('#advertisement-content').summernote('code');
				$.when(Public.commonajax('base.productBannerService',this.addOrSave,'['+JSON.stringify(this.newAdvertisement)+']')).done((res)=>{
					if(res.code == 200){
						let successMsg = this.isWatch == undefined ? '新增成功！' : '保存成功！';
						Public.ajaxPrompt(successMsg);
						//that.clearDate();
					}else{Public.ajaxPrompt(res.msg)}
				});
			},

			//清空数据
			clearDate () {
				this.newAdvertisement.defaultFlag =  "0";
				this.newAdvertisement.description =  "";
				this.newAdvertisement.linkType =  "00";
				this.newAdvertisement.linkAddress =  '';
				this.newAdvertisement.linkText =  '';
				this.newAdvertisement.name =  "";
				this.newAdvertisement.orderNo =  null;
				this.newAdvertisement.picture =  null;
				this.newAdvertisement.position =  "0301";
				this.newAdvertisement.productCode = "coms.xiangtan.doctor_pc";
				this.newAdvertisement.valid_endDate =  "";
				this.newAdvertisement.valid_startDate =  "";
				$('#advertisement-content').summernote('code','')
				this.imgurl = '';
				this.$broadcast("imgurl", this.imgurl);
			},

			// 查看广告
			watchProduct () {
				this.isWatch = window.location.search.split('?')[1];
				if(this.isWatch != undefined){
					const imgId = this.isWatch.split('&')[1];
					this.imgurl = Public.IMGVIEW_URL() + imgId;
					this.$broadcast("imgurl", this.imgurl);
					this.isWatch = this.isWatch.split('&')[0];
					$.when(Public.commonajax('base.productBannerService','getProductBannerDetailById','["'+this.isWatch+'"]')).done((res)=>{
						if(res.code == 200){
							this.newAdvertisement = res.body;
							this.newAdvertisement.valid_endDate = res.body.valid_endDate ? res.body.valid_endDate.substr(0,10) : '';
							this.newAdvertisement.valid_startDate = res.body.valid_startDate ? res.body.valid_startDate.substr(0,10) : '';
							$('#advertisement-content').summernote('code',res.body.linkText);
						}
					});
				}else{this.clearDate()};
			},

			backManage () {
				location.href = './advertisementManage.html';
			},

			//时间验证
			validateTime () {
				let start_val = $('#startDate').val();
				let end_val = $('#endDate').val();
				let start = new Date(start_val).getTime();
				let end = new Date(end_val).getTime();
				if(start > end){
					Public.ajaxPrompt('开始日期不能大于结束日期！');
					return false
				}else{
					this.newAdvertisement.valid_endDate = end_val;
					this.newAdvertisement.valid_startDate = start_val;
					return true;
				}
				//pattern="^(?:http(?:s|):\/\/|)(?:(?:\w*?)\.|)(?:\w*?)\.(?:\w{2,4})(?:\?.*|\/.*|)$"
			}
		}//methods
	}


</script>
